<template>
  <div class="app-container">
    <el-card class="box-card">
      <el-form :inline="true" :model="listQuery">
        <el-form-item>
          <el-date-picker
            size="small"
            v-model="listQuery.year"
            type="year"
            placeholder="选择时间"
            format="yyyy"
            value-format="yyyy"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-search"
            @click.native="handleFilter"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
      <el-table
        :data="datas"
        border
        v-loading="listLoading"
        fit
        highlight-current-row
        style="width: 100%"
        size="small"
        show-summary
        :summary-method="getSummaries"
      >
        <el-table-column
          type="index"
          label="#"
          align="center"
        ></el-table-column>
        <el-table-column
          v-for="column in tableColumns"
          :key="column.key"
          :label="column.title"
          :prop="column.key"
          :align="column.align ? column.align : 'center'"
          :width="column.width ? column.width : ''"
          :formatter="dataFormatter"
        >
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>
<script>
import { getBidStats } from "@/api/stats";
import { toThousandFilter } from "@/filters";

export default {
  name: "bidStats",
  data() {
    return {
      tableColumns: [
        {
          key: "year_month",
          title: "时间",
          align: "center",
        },
        {
          key: "fees_totals",
          title: "费用(元)",
        },
        {
          key: "broker_fees_totals",
          title: "居间费(元)",
        },
      ],
      datas: [],
      listLoading: true,
      listQuery: {
        year: new Date().getFullYear() + "",
      },
    };
  },
  created() {
    this.getBidStatsList();
  },
  methods: {
    getBidStatsList() {
      this.listLoading = true;
      getBidStats(this.listQuery)
        .then((res) => {
          const temp_data = res.map((v) => {
            v.year_month = `${v.year}-${v.month}`;
            return v;
          });
          this.datas = temp_data;
          this.listLoading = false;
        })
        .catch((error) => {
          console.log(error);
          this.$message.error("获取数据失败!");
          this.listLoading = false;
        });
    },
    // 查询
    handleFilter() {
      this.getBidStatsList();
    },
    //格式化
    dataFormatter(row, column, cellValue, index) {
      if (
        column.property == "fees_totals" ||
        column.property == "broker_fees_totals"
      ) {
        return cellValue && toThousandFilter(cellValue.toFixed(2));
      } else {
        return cellValue;
      }
    },
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 1) {
          sums[index] = "合计";
          return;
        }
        if (
          column.property === "fees_totals" ||
          column.property === "broker_fees_totals"
        ) {
          const values = data.map((item) => item[column.property]);
          let s = values
            .reduce((prev, curr) => {
              return prev + curr;
            }, 0)
            .toFixed(2);
          sums[index] = toThousandFilter(s);
          sums[index] += " 元";
        } else {
          return;
        }
      });
      return sums;
    },
  },
};
</script>